<template>
	<view>
		<view style="height: 100rpx;padding-bottom: env(safe-area-inset-bottom);"></view>
		<view class="tab-bar">
			<view v-for="(item, index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
				<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
				<view class="tab_text" :style="{ color: currentIndex == index ? selectedColor : color }">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			selectedIndex: {
				// 当前选中的tab index
				default: 0,
			},
			selectedTab: {
				// 当前选中的tab
				default: 0,
			},
		},
		data() {
			return {
				color: '#7A7E83',
				selectedColor: '#42A8F3',
				list: [],
				currentIndex: 0,
			};
		},
		created() {
			this.currentIndex = this.selectedIndex;
			var _this = this;
			if (this.selectedTab == 1) {
				_this.list = [
					{
						pagePath: "/pagesClient/index/index",
						iconPath: "/static/img/shouye.png",
						selectedIconPath: "/static/img/shouye1.png",
						text: "首页"
					},
					{
						pagePath: "/pagesClient/view/invoice",
						iconPath: "/static/img/fapiao.png",
						selectedIconPath: "/static/img/fapiao1.png",
						text: "发票中心"
					},
					{
						pagePath: "/pagesClient/view/entrust",
						iconPath: "/static/img/weituo.png",
						selectedIconPath: "/static/img/weituo1.png",
						text: "委托单"
					},
					{
						pagePath: "/pagesClient/view/message",
						iconPath: "/static/img/liuyan.png",
						selectedIconPath: "/static/img/liuyan1.png",
						text: "在线留言"
					},
					{
						pagePath: "/pagesClient/base/index",
						iconPath: "/static/img/my.png",
						selectedIconPath: "/static/img/my1.png",
						text: "我的"
					}
				];
			}else{
				// 实验室
				_this.list = [
					{
						pagePath: "/pages/index/index",
						iconPath: "/static/tab-home.png",
						selectedIconPath: "/static/tab-home-blue.png",
						text: "服务广场"
					},
					{
						pagePath: "/pages/profile/profile",
						iconPath: "/static/tab-my.png",
						selectedIconPath: "/static/tab-my-blue.png",
						text: "我的"
					},
				];
			}
		},
		methods: {
			switchTab(item, index) {
				if(this.currentIndex == index) return false;
				this.currentIndex = index;
				let url = item.pagePath;
				uni.redirectTo({ url: url });
			},
		},
	};
</script>
 
<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		border-top: 2rpx solid #eee;
		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.tab_img {
				width: 37rpx;
				height: 41rpx;
			}
			.tab_text {
				font-size: 25rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>